<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/immersed.js"></script>
		
	</head>
		<script>
		var subBarHeight = STATUSBAR_HEIGHT + 44;
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML = ".sub-bar{height:" + subBarHeight + "px}.cmain{top:" + subBarHeight + "px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj); 
	</script>
	<style type="text/css">
		body {
			background-color: #eee;
		}
		
		[v-cloak] {
			display: none;
		}
		
		.sub-bar {
			background-color: #45a75c;
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			z-index: 1;
		}
		
		.sub-bar .logo {
			position: absolute;
			left: 8px;
			bottom: 10px;
			width: 100px;
		}
		
		.sub-bar .search-bar {
			position: absolute;
			left: 115px;
			right: 10px;
			bottom: 8px;
			border-radius: 20px;
			height: 26px;
			background: rgba(255, 255, 255, 1);
		}
		
		.sub-bar .search-bar i {
			display: block;
			height: 2px;
			width: 30px;
			text-align: center;
			line-height: 28px;
			color: #999;
			font-size: 18px;
		}
		
		.sub-bar .search-bar p {
			position: absolute;
			bottom: -10px;
			left: 50px;
			right: 50px;
			text-align: center;
			color: #999;
			font-size: 13px;
		}
		
		.cmain{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.cmain .left{
			width: 80px;
			font-size: 14px;
		}
		.cmain .left p{
			padding:10px 10px;
		}
		.cmain .left p.active{
			background-color: #fff;
		}
		.cmain .right{
			position: absolute;
			left: 80px;
			top:0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			overflow-y:scroll;
		}
		.item {
            width: 25%;
            float: left;
            text-align: center;
        }
        
        .item div {
            padding: 8px;
        }
        
        .item img {
            width: 100%;
            display: block;
            margin: auto;
        }
        
        .item p {
            margin-top: 5px;
            font-size: 10px;
            color: #777;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
	</style>

	<body>
		<div id="app" v-cloak>
			<div class="sub-bar">
				<img class="logo" src="images/logo.png">
				<div class="search-bar" onclick="clicked('goods_search.html')">
					<i class="iconfont icon-search"></i>
					<p>搜索更多宝贝</p>
				</div>
			</div>



			<div class="cmain">
				<div class="left">
					<p :class="vo.active?'active':''" v-for="(vo,index) in categorys" @click="setCategory(index)">{{vo.title}}</p>
				</div>
				<div class="right">
					<div style="padding: 10px;">
					<div class="item" v-for="(vo,index) in sub" @click="search(vo.k)">
                        <div>
                            <img :src="vo.icon">
                            <p>{{vo.subtitle}}</p>
                        </div>
                    </div>
					</div>
				</div>
			</div>
			

		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/imgload.js"></script>
		<script src="js/systemShare.js"></script>
		<script src="js/wxShare.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/jquery.lazyload.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
			

			mui.init()
			var vm, self;
			vm = new Vue({ 
				el: "#app",  
				data: {
					categorys: [{
						title:'珠宝品类',
						id:'c1',
						active:true,
						sub:[{
							subtitle:'翡翠',
							k:'翡翠',
							icon:'images/fenlei/c1/1.png'
						},
						{
							subtitle:'和田玉',
							k:'和田玉',
							icon:'images/fenlei/c1/2.png'
						},
						{
							subtitle:'彩宝',
							k:'彩宝',
							icon:'images/fenlei/c1/3.png'
						},
						{
							subtitle:'碧玺',
							k:'碧玺',
							icon:'images/fenlei/c1/19.png'
						},
						{
							subtitle:'祖母绿',
							k:'祖母绿',
							icon:'images/fenlei/c1/20.png'
						},
						{
							subtitle:'蓝宝石',
							k:'蓝宝石',
							icon:'images/fenlei/c1/21.png'
						},
						{
							subtitle:'红宝石',
							k:'红宝石',
							icon:'images/fenlei/c1/22.png'
						},
						{
							subtitle:'海蓝宝',
							k:'海蓝宝',
							icon:'images/fenlei/c1/23.png'
						},
						{
							subtitle:'托帕石',
							k:'托帕',
							icon:'images/fenlei/c1/24.png'
						},
						{
							subtitle:'欧泊石',
							k:'欧泊',
							icon:'images/fenlei/c1/25.png' 
						},
						{
							subtitle:'坦桑石',
							k:'坦桑石',
							icon:'images/fenlei/c1/26.png'
						},
						{
							subtitle:'舒俱来',
							k:'舒俱来',
							icon:'images/fenlei/c1/27.png' 
						},
						{
							subtitle:'珍珠',
							k:'珍珠',
							icon:'images/fenlei/c1/4.png'
						},
						{
							subtitle:'水晶',
							k:'水晶',
							icon:'images/fenlei/c1/5.png'
						},
						{
							subtitle:'琥珀',
							k:'琥珀',
							icon:'images/fenlei/c1/6.jpg'
						},
						{
							subtitle:'蜜蜡',
							k:'蜜蜡',
							icon:'images/fenlei/c1/6-1.jpg'
						},
						{
							subtitle:'南红',
							k:'南红',
							icon:'images/fenlei/c1/7.png'
						},
						{
							subtitle:'绿松',
							k:'绿松',
							icon:'images/fenlei/c1/8.png'
						},
						{
							subtitle:'青金',
							k:'青金',
							icon:'images/fenlei/c1/9.png'
						},
						{
							subtitle:'钻石',
							k:'钻石',
							icon:'images/fenlei/c1/10.png'
						},
						{
							subtitle:'珊瑚',
							k:'珊瑚',
							icon:'images/fenlei/c1/11.png'
						},
						{
							subtitle:'K金',
							k:'K金',
							icon:'images/fenlei/c1/12.png'
						},
						{
							subtitle:'银饰',
							k:'银饰',
							icon:'images/fenlei/c1/13.png'
						},
						{
							subtitle:'花梨',
							k:'花梨',
							icon:'images/fenlei/c1/14.png'
						},
						{
							subtitle:'紫檀',
							k:'紫檀',
							icon:'images/fenlei/c1/15.png'
						},
						{
							subtitle:'菩提',
							k:'菩提',
							icon:'images/fenlei/c1/16.png'
						},
						{
							subtitle:'玛瑙',
							k:'玛瑙',
							icon:'images/fenlei/c1/17.png'
						},
						{
							subtitle:'玉髓',
							k:'玉髓',
							icon:'images/fenlei/c1/18.png'
						}]
					},{
						title:'佩戴功能',
						id:'c2',
						active:false,
						sub:[{
							subtitle:'手镯',
							k:'手镯',
							icon:'images/fenlei/c2/1.png'
						},
						{
							subtitle:'戒指',
							k:'戒指',
							icon:'images/fenlei/c2/2.png'
						},
						{
							subtitle:'戒面',
							k:'戒面',
							icon:'images/fenlei/c2/16.png' 
						},
						{
							subtitle:'手链',
							k:'手链',
							icon:'images/fenlei/c2/3.png'
						},
						{
							subtitle:'项链',
							k:'项链',
							icon:'images/fenlei/c2/4.png'
						},
						{
							subtitle:'吊坠',
							k:'吊坠',
							icon:'images/fenlei/c2/5.png'
						},
						{
							subtitle:'耳环/耳坠',
							k:'耳环 耳坠',
							icon:'images/fenlei/c2/6.png'
						},
						{
							subtitle:'毛衣链',
							k:'毛衣链',
							icon:'images/fenlei/c2/7.png'
						},
						{
							subtitle:'脚链',
							k:'脚链',
							icon:'images/fenlei/c2/8.png'
						},
						{
							subtitle:'胸针',
							k:'胸针',
							icon:'images/fenlei/c2/14.png'
						},
						{
							subtitle:'玉佩',
							k:'玉佩',
							icon:'images/fenlei/c2/9.png'
						},
						{
							subtitle:'手串',
							k:'手串',
							icon:'images/fenlei/c2/10.png'
						},
						{
							subtitle:'把玩',
							k:'把玩',
							icon:'images/fenlei/c2/11.png'
						},
						{
							subtitle:'器皿',
							k:'器皿',
							icon:'images/fenlei/c2/12.png'
						},
						{
							subtitle:'摆件',
							k:'摆件',
							icon:'images/fenlei/c2/13.png' 
						},
						{
							subtitle:'玉章',
							k:'玉章 印章',
							icon:'images/fenlei/c2/15.png'
						}
						]
					},{
						title:'款式类别',
						id:'c3',
						active:false,
						sub:[{
							subtitle:'观音',
							k:'观音',
							icon:'images/fenlei/c3/1.png' 
						},
						{
							subtitle:'佛公',
							k:'佛公',
							icon:'images/fenlei/c3/2.png'  
						},
						{
							subtitle:'生肖',
							k:'生肖',
							icon:'images/fenlei/c3/3.png'  
						},
						{
							subtitle:'平安扣',
							k:'平安扣',
							icon:'images/fenlei/c3/4.png'  
						},
						{
							subtitle:'平安牌',
							k:'平安牌',
							icon:'images/fenlei/c3/5.png'  
						},
						{
							subtitle:'佛珠',
							k:'佛珠',
							icon:'images/fenlei/c3/6.png'  
						},
						{
							subtitle:'金镶玉',
							k:'金镶玉',
							icon:'images/fenlei/c3/8.png'  
						},
						{
							subtitle:'貔貅',
							k:'貔貅',
							icon:'images/fenlei/c3/9.png'  
						},
						{
							subtitle:'关公',
							k:'关公',
							icon:'images/fenlei/c3/10.png'  
						},
						{
							subtitle:'转运珠',
							k:'转运珠',
							icon:'images/fenlei/c3/16.png'  
						},
						{
							subtitle:'如意',
							k:'如意',
							icon:'images/fenlei/c3/17.png'   
						},
						{
							subtitle:'玉叶',
							k:'玉叶',
							icon:'images/fenlei/c3/18.png'   
						},
						{
							subtitle: '葫芦/豆荚',
                        		k: '葫芦 豆荚',
							icon:'images/fenlei/c3/11.png'   
						},
						{
							subtitle:'竹节',
							k:'竹节',
							icon:'images/fenlei/c3/12.png'   
						}]
					}],
					sub:[]
				},
				created: function() { 
					var vm = this;
					vm.categorys.map(function(v,i){
						if(v.active){
							vm.sub = v.sub
						}
					})
				},
				methods: {
			
					setCategory: function(index) {
						var vm = this;
						if(vm.categorys[index].active) return ;
						
						vm.categorys.map(function(v,i){ 
							if(i == index){
								vm.sub = v.sub;
								v.active = true;
							}else{
								v.active = false;
							}
						})
					},

					search: function(k) {
						Smarge.set('search_keyword', k)
						clicked('goods_search_list.html', 'pop-in');
					},
					
				}
			});


		</script>

	</body>

</html>